<template>
    <view class="checkout-container">
      <!-- 顶部导航 -->
      <view class="nav-bar">
        <view class="back-btn" @tap="goBack">
          <text class="iconfont icon-back"></text>
        </view>
        <text class="nav-title">订单结算</text>
      </view>
      
      <!-- 配送时间 -->
      <view class="delivery-time-card">
        <view class="card-title">配送时间</view>
        <view class="time-options">
          <view 
            v-for="(time, index) in deliveryTimes" 
            :key="index"
            class="time-option"
            :class="{ active: selectedTimeIndex === index }"
            @tap="selectTime(index)"
          >
            <text>{{ time }}</text>
          </view>
        </view>
      </view>
      
      <!-- 订单详情 -->
      <view class="order-card">
        <view class="card-title">订单详情</view>
        <view class="order-items">
          <view class="order-item" v-for="(item, index) in cartItems" :key="index">
            <image class="item-image" :src="item.image" mode="aspectFill"></image>
            <view class="item-info">
              <text class="item-name">{{ item.name }}</text>
              <view class="item-price-row">
                <text class="item-price">¥{{ item.price }}</text>
                <text class="item-quantity">x{{ item.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-summary">
          <view class="summary-row">
            <text>商品金额</text>
            <text>¥{{ subtotal.toFixed(2) }}</text>
          </view>
          <view class="summary-row discount" v-if="discount > 0">
            <text>优惠</text>
            <text>-¥{{ discount.toFixed(2) }}</text>
          </view>
        </view>
        <view class="order-total">
          <text>实付金额</text>
          <text class="total-price">¥{{ totalAmount.toFixed(2) }}</text>
        </view>
      </view>
      
      <!-- 备注 -->
      <view class="remark-card">
        <view class="card-title">订单备注</view>
        <input 
          class="remark-input" 
          placeholder="请输入备注信息（选填）" 
          v-model="remark"
          placeholder-style="color: #999;"
        />
      </view>
      
      <!-- 底部结算栏 -->
      <view class="checkout-bar safe-area-inset-bottom">
        <view class="total-info">
          <text>合计：</text>
          <text class="total-price">¥{{ totalAmount.toFixed(2) }}</text>
        </view>
        <view class="submit-btn" @tap="submitOrder">
          <text>提交订单</text>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        cartItems: [],
        deliveryTimes: ['立即配送', '11:30-12:00', '12:00-12:30', '12:30-13:00', '17:30-18:00', '18:00-18:30'],
        selectedTimeIndex: 0,
        remark: '',
        subtotal: 0,
        discount: 0
      }
    },
    computed: {
      totalAmount() {
        return this.subtotal - this.discount;
      }
    },
    onLoad(options) {
      // 从缓存或全局状态获取购物车数据
      this.getCartItems();
    },
    methods: {
      goBack() {
        uni.navigateBack();
      },
      getCartItems() {
        // 实际应用中应该从缓存或全局状态获取购物车数据
        // 这里使用模拟数据
        this.cartItems = [
          {
            id: 101,
            name: '精选水果拼盘',
            price: 39.9,
            image: '/static/dining/fruit-plate.png',
            quantity: 1
          },
          {
            id: 202,
            name: '进口牛奶',
            price: 25.8,
            image: '/static/dining/milk.jpg',
            quantity: 2
          }
        ];
        
        // 计算商品总价
        this.calculateSubtotal();
      },
      calculateSubtotal() {
        this.subtotal = this.cartItems.reduce((total, item) => {
          return total + (item.price * item.quantity);
        }, 0);
      },
      selectTime(index) {
        this.selectedTimeIndex = index;
      },
      submitOrder() {
        // 构建订单数据
        const orderData = {
          items: this.cartItems,
          deliveryTime: this.deliveryTimes[this.selectedTimeIndex],
          remark: this.remark,
          subtotal: this.subtotal,
          discount: this.discount,
          totalAmount: this.totalAmount
        };
        
        console.log('提交订单数据:', orderData);
        
        // 实际应用中这里应该调用API提交订单
        uni.showLoading({
          title: '提交订单中...'
        });
        
        setTimeout(() => {
          uni.hideLoading();
          
          // 模拟订单提交成功
          uni.showToast({
            title: '订单提交成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              // 跳转到支付页面或订单详情页
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/dining/order-success?id=123456'
                });
              }, 1500);
            }
          });
        }, 1500);
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .checkout-container {
    min-height: 100vh;
    background-color: #f8f9fc;
    padding-bottom: 120rpx;
  }
  
  .nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background-color: #fff;
    
    .back-btn {
      position: absolute;
      left: 30rpx;
      font-size: 40rpx;
      color: #333;
    }
    
    .nav-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
  }
  
  .delivery-time-card,
  .order-card,
  .remark-card {
    margin: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
  }
  
  .card-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .time-options {
    display: flex;
    flex-wrap: wrap;
    
    .time-option {
      width: 30%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fc;
      border-radius: 8rpx;
      margin-right: 3%;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      color: #666;
      
      &.active {
        background-color: #f0f2ff;
        color: #6a11cb;
        border: 1rpx solid #6a11cb;
      }
    }
  }
  
  .order-items {
    .order-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .item-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
    
      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .item-name {
          font-size: 28rpx;
          color: #333;
        }
        
        .item-price-row {
          display: flex;
          justify-content: space-between;
          
          .item-price {
            font-size: 28rpx;
            font-weight: 500;
            color: #6a11cb;
          }
          
          .item-quantity {
            font-size: 26rpx;
            color: #999;
          }
        }
      }
    }
  }

.order-summary {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
  
  .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    color: #666;
    
    &.discount {
      color: #ff5722;
    }
  }
}

.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx dashed #eee;
  font-size: 28rpx;
  color: #333;
  
  .total-price {
    font-size: 34rpx;
    font-weight: 600;
    color: #6a11cb;
  }
}

.remark-input {
  width: 100%;
  height: 80rpx;
  background-color: #f8f9fc;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.checkout-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  
  .total-info {
    font-size: 28rpx;
    color: #333;
    
    .total-price {
      font-size: 34rpx;
      font-weight: 600;
      color: #6a11cb;
    }
  }
  
  .submit-btn {
    background-color: #6a11cb;
    color: #fff;
    padding: 15rpx 40rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
}

// 获取底部安全区域高度
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>